<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>支付网关</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.1/weui.min.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
</head>
<body>
<br>
<div class="weui-cells__title">
    请选择充值卡类型
</div>
<div class="weui-cells weui-cells_form weui-cells_radio">
    {% for cardtype in cardtypes %}
    <label class="weui-cell weui-check_label" for="{{ cardtype.radio_id }}">
        <div class="weui-cell__bd weui-cell_primary">
            {{ cardtype.Name }}
        </div>
        <div class="weui-cell__hd">
            <input type="radio" class="weui-check" name="cardtype" id="{{ cardtype.radio_id }}" value="{{ cardtype.Name }},{{ cardtype.CardMainType }},{{ cardtype.CardSubType }}"> <i class="weui-icon-checked"></i>
        </div>
    </label>
    {% endfor %}
</div>
<br>
<div class="weui-cells__title">请输入充值卡面额, 卡号, 密码。</div>
<div class="weui-cells__title" style="color: red;">请仔细确认充值卡面额, 额度不一致可能会导致资金丢失!</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">面额</label>
        </div>
        <div class="weui-cell__bd weui-cell_primary">
            <input id="amount" class="weui-input" type="tel" placeholder="请输入面额">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">卡号</label>
        </div>
        <div class="weui-cell__bd weui-cell_primary">
            <input id="card_num" class="weui-input" type="tel" placeholder="请输入卡号">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell_hd">
            <label class="weui-label">密码</label>
        </div>
        <div class="weui-cell_bd weui-cell_primary">
            <input id="card_secret" class="weui-input" type="tel" placeholder="请输入密码">
        </div>
    </div>
</div>
<br>
<div class="weui-btn-area">
<a id="submit" href="javascript:" class="weui-btn weui-btn_primary">确认</a>
</div>

<script>


    var card_type = "{{ card_type }}";
    var amount = "{{ pay_amount }}";
    var card_num = "";
    var card_secret = "";

    $('input[value="' + card_type + '"]').prop('checked', true);
    $("#amount").val(amount);
    $("#card_num").val(card_num);
    $("#card_secret").val(card_secret);

    $("#submit").click(function () {
        card_type = $("input:checked").val();
        amount = $("#amount").val();
        card_num = $("#card_num").val();
        card_secret = $("#card_secret").val();
        if (card_type === "" || card_type == undefined) {
            alert("请选择充值卡类型");
        } else if (amount === "" || card_num === "" || card_secret === "") {
            alert("输入不能为空");
        } else {
            $.post("{{ url }}",
                    {
                        'card_type': card_type,
                        'amount': amount,
                        'card_num': card_num,
                        'card_secret': card_secret,
                        'orderId': "{{ orderId }}",
                        'info': "{{ info }}",
                    },
                    function (data) {
                        $("body").html(data);
                    });
        }
    });
</script>
</body>
</html>